<template>
  <div class="userContainer" @touchstart="touchStart" @touchmove="touchMove">
    <view class="swiper positionRelative">
      <view class="swiper-wrap" :style="swiperWrapStyle">
        <uv-swiper :list="swipers" @change="e => current = e.current" height="100%" circular></uv-swiper>
      </view>
      <view class="swiperInfo" v-if="!touchHeight">
        <view class="baseInfo flex alignCenter">
          <view class="fz20 bold name">{{info.nickName}}·{{info.ageYear}}</view>
          <view class="tags flex alignCenter">
            <view class="tag flex alignCenter fz12 shrink" v-if="authInfo.isIdentityVerified=='已认证'">
              <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/08/17284019014703678.png" width="14px" height="14px"></uv-image>
              <text>实名认证</text>
            </view>
            <view class="tag flex alignCenter fz12 shrink" v-if="authInfo.isCompanyVerified=='已认证'">
              <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/08/17284019636572781.png" width="14px" height="14px"></uv-image>
              <text>工作认证</text>
            </view>
          </view>
        </view>

        <view class="map flex alignCenter">
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/08/17283536824212948.png" width="12px" height="14px"></uv-image>
          <text>{{info.city}}，{{info.homeEconomize}}</text>
        </view>

        <view class="map flex alignCenter">
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/08/17283545202419991.png" width="12px" height="14px"></uv-image>
          <text>{{info.height}}，{{info.weight}}</text>
        </view>

        <view class="map flex alignCenter">
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/08/17283546340498174.png" width="12px" height="14px"></uv-image>
          <text class="flex alignCenter">{{info.industry}}
            <text v-if="info.foreignCompanyName">，{{info.foreignCompanyName}}</text>
          </text>
        </view>

        <view class="map flex alignCenter">
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/08/17283547619911991.png" width="14px" height="14px"></uv-image>
          <text>{{info.edu}}，{{info.school}}</text>
        </view>

        <view class="indicator flex">
          <view class="indicator__dot" v-for="(item, index) in swipers" :key="index" :class="[index === current && 'indicator__dot--active']"></view>
        </view>

        <!-- 下一个 喜欢 发消息 -->
        <view class="next flex alignCenter">
          <view class="close icon" @click="next">
            <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/08/17283826207912676.png" width="44px" height="44px"></uv-image>
          </view>
          <view class="know shrink icon" @click="toFollow">
            <uv-image v-if="isFollow" src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/20/17293617508898893.png" width="64px" height="64px"></uv-image>
            <uv-image v-else src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/08/17283848737881612.png" width="64px" height="64px"></uv-image>
          </view>
          <view class="icon" @click="instance.refs.applyForKnowRef.open(info)">
            <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/08/17283827850205255.png" width="44px" height="44px"></uv-image>
          </view>
        </view>

        <view class="tabber flex">
          <view class="tab">
            <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/08/17283571193188000.png" width="24px" height="24px"></uv-image>
          </view>
          <view class="tab" @click.stop="proxy.$utils.toLink('/pages/tabbar/tabbar-2/tabbar-2','tab')">
            <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/08/17283571311878898.png" width="24px" height="24px"></uv-image>
          </view>
          <view class="tab" @click.stop="proxy.$utils.toLink('/pages/tabbar/tabbar-3/tabbar-3','tab')">
            <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/08/17283571865155804.png" width="24px" height="24px"></uv-image>
          </view>
          <view class="tab" @click.stop="proxy.$utils.toLink('/pages/tabbar/tabbar-4/tabbar-4','tab')">
            <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/08/17283572257615839.png" width="24px" height="24px"></uv-image>
          </view>
          <view class="tab" @click.stop="proxy.$utils.toLink('/pages/tabbar/tabbar-5/tabbar-5','tab')">
            <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/08/17283572531885959.png" width="24px" height="24px"></uv-image>
          </view>
        </view>
      </view>
    </view>

    <!-- 浮动面板 -->
    <view class="floatingPanel" v-if="show">
      <view class="actionBtn flex alignCenter justifyCenter">
        <view class="item" @click="next">
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/18/17292349153146717.png" width="50px" height="50px"></uv-image>
        </view>
        <view class="item" @click="toFollow">
          <uv-image v-if="isFollow" src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/18/17292349152512282.png" width="50px" height="50px"></uv-image>
          <uv-image v-else src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/20/17293618528007139.png" width="50px" height="50px"></uv-image>
        </view>
        <view class="item" @click="instance.refs.applyForKnowRef.open(info)">
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/18/17292349151119457.png" width="50px" height="50px"></uv-image>
        </view>
      </view>
      <scroll-view class="info" :scroll-y="scrollYFunc" :style="infoStyle" @scroll="scroll">
        <view class="user">
          <view class="flex">
            <view class="fz20 bold name">{{info.nickName}}·{{info.ageYear}}</view>
            <view class="tags flex alignCenter">
              <view class="tag flex alignCenter fz12 shrink" v-if="authInfo.isIdentityVerified=='已认证'">
                <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/09/17284055787786887.png" width="14px" height="14px"></uv-image>
                <text>实名认证</text>
              </view>
              <view class="tag flex alignCenter fz12 shrink" v-if="authInfo.isCompanyVerified=='已认证'">
                <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/09/17284750648136801.png" width="14px" height="14px"></uv-image>
                <text>工作认证</text>
              </view>
            </view>
          </view>
          <view class="grids gridColumns2 cells">
            <view class="grid flex alignCenter fz14 ">
              <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/09/17284763012037721.png" width="10px" height="13px"></uv-image>
              <text>{{info.city}}，{{info.homeEconomize}}</text>
            </view>
            <view class="grid flex alignCenter fz14 ">
              <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/09/17284765568488117.png" width="15px" height="15px"></uv-image>
              <text>{{info.height}}·{{info.weight}}</text>
            </view>
            <view class="grid flex alignCenter fz14 ">
              <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/09/17284771341118273.png" width="15px" height="15px"></uv-image>
              <view class="flex justifyCenter" style="margin-left: 8px;">
                <view>{{info.industry}}</view>
                <view v-if="info.foreignCompanyName">·{{info.foreignCompanyName}}</view>
              </view>
            </view>
            <view class="grid flex alignCenter fz14 ">
              <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/09/17284771339725847.png" width="15px" height="15px"></uv-image>
              <text>{{info.edu}}·{{info.school}}</text>
            </view>
          </view>
        </view>

        <view class="desc" v-if="dynamicTotal">
          <view class="name fz14 bold flex alignCenter justifyBetween">
            <view class="flex alignCenter">
              <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/09/17284780109693964.png" width="24px" height="24px"></uv-image>
              <text class="fz18" style="color: ##41416E;margin-left: 5px;">个人动态</text>
            </view>
            <view class="flex alignCenter fz14">
              <text style="color: #41416E;margin-right:5px;">查看全部{{dynamicTotal}}条</text>
              <uv-icon name="arrow-right" size="13"></uv-icon>
            </view>
          </view>
          <view class="grids dynamic">
            <view class="item shrink" v-for="(item, index) in dynamicList" :key="index">
              <view class="con" v-if="item.medias.length">
                <image :src="item.medias[0]" mode="aspectFill" @click="proxy.$auth.previewImage(item.medias,0)" />
              </view>
              <view class="con Copywriting" v-else>
                <view class="bold TBold">T</view>
                <view class="write fz12">{{item.text}}</view>
              </view>
            </view>
          </view>
        </view>

        <view class="address flex alignCenter fz12" v-if="info.distance">
          <uv-icon name="map-fill" color="#B2B2C2"></uv-icon>
          <text>距你 {{info.distance}}km {{info.district}}</text>
        </view>

        <view class="wrap">
          <view v-if="queryInfo_format(1)">
            <view class="title flex alignCenter">
              <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/09/17284867663885371.png" width="24px" height="24px"></uv-image>
              <text>自我描述</text>
            </view>
            <view class="descText fz14">{{queryInfo_format(1).tbDescribe}}</view>
          </view>

          <view style="margin-top: 25px;" v-if="queryInfo_format(4)">
            <view class="title flex alignCenter">
              <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/09/17284872297727960.png" width="18px" height="20px"></uv-image>
              <text>兴趣爱好</text>
            </view>
            <view class="descText fz14">{{queryInfo_format(4).tbDescribe}}</view>
          </view>

          <view style="margin-top: 25px;" v-if="queryInfo_format(2)">
            <view class="title flex alignCenter">
              <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/09/17284875197274025.png" width="24px" height="24px"></uv-image>
              <text>爱情观</text>
            </view>
            <view class="descText fz14">{{queryInfo_format(2).tbDescribe}}</view>
          </view>

          <view style="margin-top: 25px;" v-if="queryInfo_format(6)">
            <view class="title flex alignCenter">
              <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/09/1728488396837100.png" width="24px" height="24px"></uv-image>
              <text>理想的另一半</text>
            </view>
            <view class="descText fz12">{{queryInfo_format(6).tbDescribe}}</view>
          </view>
        </view>

        <view class="content auth" v-if="false">
          <view class="topInfo flex justifyBetween alignCenter">
            <view class="">
              <view class="name">双重认证</view>
              <view class="flex alignCenter">
                <view @click.stop="authType=1" v-if="authInfo.isIdentityVerified=='已认证'" class="flex alignCenter authIcon fz10" style="margin-right: 6px;">
                  <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/08/17283823617474390.png" width="21px" height="21px"></uv-image>
                  <text>实名</text>
                </view>
                <view class="flex alignCenter authIcon fz10" @click.stop="authType=2" v-if="authInfo.isCompanyVerified=='已认证'">
                  <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/08/17283824110134009.png" width="21px" height="21px"></uv-image>
                  <text>工作</text>
                </view>
              </view>
            </view>
            <view class="reliability">
              <view class="fz10 textRight">
                可信度
              </view>
              <view class="percentage bold">{{authInfo.reliability}}</view>
            </view>
          </view>

          <view class="flex alignCenter justifyBetween bottomInfo" v-if="authInfo && authType==1">
            <view>
              <view class="fz14 bold" style="margin-bottom: 5px;">认证方式·{{authInfo.realNameType}}</view>
              <view class="fz14">{{authInfo.identificationNumber}}</view>
            </view>
            <view class="check flex alignCenter justifyCenter fz12 shrink">
              <view class="icon">
                <uv-icon name="checkmark" color="#fff"></uv-icon>
              </view>
              {{authInfo.isIdentityVerified}}
            </view>
          </view>
          <!-- 工作认证 -->
          <view class="flex alignCenter justifyBetween bottomInfo" v-if="authInfo && authType==2">
            <view class="">
              <view class="fz14 bold" style="margin-bottom: 5px;">认证方式：{{authInfo.workMethod}}</view>
              <view class="fz12">工作信息具有时效性，且只认证公司名，无法认证职位真实性</view>
            </view>
            <view class="check flex alignCenter justifyCenter fz12 shrink">
              <view class="icon">
                <uv-icon name="checkmark" color="#fff"></uv-icon>
              </view>
              {{authInfo.isCompanyVerified}}
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <applyForKnow ref="applyForKnowRef"></applyForKnow>
  </div>
</template>

<script setup lang="ts">
//申请认识
import applyForKnow from "@/pages/tabbar/tabbar-1/components/applyForKnow.vue";
const instance = getCurrentInstance();
const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();

let props = defineProps(["info", "navHeight"]);
const emit = defineEmits(["next"]);

let swipers = ref([]);
let authInfo = ref({}); //实名认证
let info = ref({});
let queryInfoList = ref([]); //查询信息
let authType = ref(1); //认证类型
let dynamicList = ref([]); //动态列表
let dynamicTotal = ref(0); //动态总数
let current = ref(0); //当前轮播图索引
let isFollow = ref(false); //关注状态
let startX = 0; // 记录触摸开始的X坐标
let startY = 0; // 记录触摸开始的Y坐标
let endX = 0; // 记录触摸结束的X坐标
let endY = 0; // 记录触摸结束的Y坐标
let touchHeight = ref(0); // 记录触摸的高度
let scrollTop = ref(0); // 记录滚动条高度
let scrollY = ref(false); // 记录滚动条是否滚动
let windowHeight = counter.systemInfo.windowHeight;
let show = ref(false); // 显示隐藏

let allHeight = computed(() => {
  return windowHeight - 30 - 33 - props.navHeight;
});

let infoStyle = computed(() => {
  let obj = { height: `${touchHeight.value}px` };
  if (touchHeight.value > counter.systemInfo.windowHeight / 2) {
    obj["overflowY"] = "auto";
  }
  return obj;
});

let scrollYFunc = computed(() => {
  let a = false;
  if (touchHeight.value > counter.systemInfo.windowHeight / 2) {
    a = true;
  }
  return a;
});

let swiperWrapStyle = computed(() => {
  let hei = windowHeight - touchHeight.value;
  let obj = { height: `${hei}px` };
  if (touchHeight.value >= allHeight.value) {
    obj["filter"] = "blur(10px) grayscale(1)";
  }
  return obj;
});

function scroll(e) {
  scrollTop.value = e.detail.scrollTop;
}

function touchStart(event) {
  startX = event.touches[0].pageX;
  startY = event.touches[0].pageY;
}

function touchMove(event) {
  // 移动时更新结束坐标
  endX = event.touches[0].pageX;
  endY = event.touches[0].pageY;
  touchEnd();
}

function touchEnd() {
  let direction = getSwipeDirection(startX, startY, endX, endY);

  let isClick = true;
  // 判断是否滑动
  if (endX == 0 && endY == 0) {
  } else if (Math.abs(endX - startX) > 10 || Math.abs(endY - startY) > 10) {
    isClick = false;
  } else {
  }
  if (isClick) return;

  if (direction == "up") {
    if (touchHeight.value) {
      touchHeight.value = allHeight.value;
    } else {
      show.value = true;
      nextTick(() => {
        touchHeight.value = windowHeight / 2;
      });
    }
  } else if (direction == "down") {
    if (touchHeight.value > windowHeight / 2) {
      touchHeight.value = windowHeight / 2;
    } else {
      touchHeight.value = 0;
      nextTick(() => {
        show.value = false;
      });
    }
  }

  function getSwipeDirection(startX, startY, endX, endY) {
    const threshold = 30; // 设定一个阈值，用于判断是否是滑动
    const deltaX = endX - startX;
    const deltaY = endY - startY;

    // 如果水平方向的位移大于垂直方向，且水平方向的位移大于阈值，则认为是水平滑动
    if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > threshold) {
      return deltaX > 0 ? "right" : "left";
    }
    // 如果垂直方向的位移大于水平方向，且垂直方向的位移大于阈值，则认为是垂直滑动
    else if (
      Math.abs(deltaY) > Math.abs(deltaX) &&
      Math.abs(deltaY) > threshold
    ) {
      return deltaY > 0 ? "down" : "up";
    }
    // 其他情况视为无效滑动
    return "none";
  }
}

async function getDynamic() {
  let { records, total } = await proxy.$apis.movements({
    page: 1,
    pageSize: 4,
    userId: info.value.userId,
  });
  dynamicList.value = records[0].data;
  dynamicTotal.value = total;
  console.log("动态", records[0].data);
}

async function getInfo() {
  let picArr = [];
  let pics = await proxy.$apis.queryUserPic({ userId: info.value.userId });
  pics.forEach((element) => {
    picArr.push(element.pictureUrl);
  });
  picArr.unshift(info.value.logo);
  swipers.value = [...picArr];

  //查询信息
  queryInfoList.value = await proxy.$apis.queryInfo({
    userId: info.value.userId,
  });

  //实名认证
  authInfo.value = await proxy.$apis.userRealInfo({
    userId: info.value.userId,
  });
}

function queryInfo_format(type) {
  let index = proxy.$utils.findIndexByField(queryInfoList.value, "type", type);
  if (index != -1) return queryInfoList.value[index];
}

function next() {
  emit("next");
}

async function toFollow() {
  await toFollowFunc();
  getFollowStatus();
}

async function toFollowFunc() {
  //已关注
  if (isFollow.value) {
    await proxy.$apis.userUnFocus({ friendId: info.value.userId });
    proxy.$utils.showToast("已取消关注");
  } else {
    await proxy.$apis.contacts({ friendId: info.value.userId });
    proxy.$utils.showToast("已成功关注");
  }
}

//关注状态
async function getFollowStatus() {
  isFollow.value = await proxy.$apis.attentionToIt({
    friendId: info.value.userId,
  });
}

watch(
  () => props.info,
  (newValue, oldValue) => {
    if (newValue && !proxy.$utils.isEmptyObject(newValue)) {
      info.value = props.info;
      getInfo();
      getDynamic();
      getFollowStatus();
    }
  },
  { immediate: true, deep: true }
);
</script>



<style lang="scss" scoped>
.floatingPanel {
  border-radius: 25px 25px 0 0;
  position: relative;
  background-color: #e2fefd;
  top: -5vw;
  .actionBtn {
    position: absolute;
    top: -33px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 999;
    .item {
      background: white;
      padding: 8px;
      border-radius: 50%;
      margin: 0 10px;
    }
  }
}
.swiper-wrap {
  background-color: #000;
  .uv-swiper {
    opacity: 0.7;
    filter: alpha(opacity=70);
  }
}
.swiperInfo {
  position: absolute;
  left: 15px;
  bottom: 20vw;
  .baseInfo {
    .name {
      color: white;
      margin-right: 15px;
    }
    .tags {
      color: white;
      .tag {
        background-color: rgba(0, 0, 0, 0.3);
        margin-right: 10px;
        padding: 5px 10px;
        border-radius: 20px;
        text {
          margin-left: 10px;
        }
      }
    }
  }
  .map {
    color: white;
    font-size: 14px;
    margin-top: 5px;
    text {
      margin-left: 5px;
    }
  }
  .indicator {
    justify-content: flex-start;
    margin-top: 15px;
    &__dot {
      height: 6px;
      width: 6px;
      border-radius: 100px;
      background-color: #e2e7f4;
      margin: 0 5px;
      transition: background-color 0.3s;
      &--active {
        background-color: #f05d89;
        width: 18px;
      }
    }
  }
  .next {
    justify-content: space-around;
    margin-top: 30px;
  }
  .tabber {
    background-color: rgba(255, 255, 255, 0.9);
    margin-top: 30px;
    border-radius: 50px;
    padding: 20px 0;
    margin-right: 15px;
    .tab {
      width: 20%;
      display: flex;
      justify-content: center;
    }
  }
}
.info {
  position: relative;
  background-color: #e2fefd;
  border-radius: 23px 23px 0 0;
  padding-top: 28px;
  height: 0;
  transition-property: height;
  transition-duration: 0.8s;
  -webkit-transition-property: height;
  -webkit-transition-duration: 0.8s;
  .user {
    padding: 15px;
    border-bottom: 1px solid #e2e7f4;
    .cells {
      margin-top: 30px;
      gap: 8px 0; //上下间距 左右间距
      .grid {
        text {
          margin-left: 8px;
        }
      }
    }
    .name {
      color: #41416e;
    }
    .tags {
      .tag {
        margin-left: 10px;
        padding: 3px 10px;
        border-radius: 13px;
        text {
          margin-left: 3px;
        }
      }
      .tag:first-child {
        color: white;
        background-color: #4ce2ef;
      }
      .tag:last-child {
        color: white;
        background-color: #fb8888;
      }
    }
  }
  .wrap {
    padding: 15px;
    .title {
      font-size: 18px;
      color: #41416e;
      text {
        margin-left: 5px;
      }
    }
    .descText {
      color: #41416e;
      background-color: #f7f7f7;
      padding: 15px 20px;
      border-radius: 10px;
      margin-top: 15px;
    }
  }
  .address {
    margin: 5px 0;
    color: #b2b2c2;
    text {
      margin-left: 3px;
    }
  }
  .auth {
    background-color: #f6efff !important;
  }
  .infoWrap {
    padding: 0 !important;
  }
  .content {
    border-radius: 8px;
    padding: 8px 11px;
    margin-top: 10px;
    .name {
      font-size: 18px;
      margin-bottom: 10px;
    }
    .topInfo {
      .authIcon {
        background-color: white;
        padding: 0 5px;
        border-radius: 10px;
        text {
          margin-left: 3px;
        }
      }
      .reliability {
        color: #9e06ff;
        .percentage {
          font-size: 24px;
        }
      }
    }
    .bottomInfo {
      background-color: white;
      margin-top: 10px;
      border-radius: 8px;
      padding: 10px;
      .check {
        margin-left: 15px;
      }
    }
    .check {
      .icon {
        background-color: #333333;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        padding: 1px;
        margin-right: 7px;
      }
    }
    .items {
      gap: 10px 10px; //上下间距 左右间距
      .item {
        font-size: 12px;
        background-color: #fafafa;
        padding: 10px 5px;
        border-radius: 10px;
        position: relative;
        height: 75px;
        padding: 0 10px;
        .el {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: calc(100% - 20px);
          .icon {
            display: flex;
            justify-content: center;
          }
          text {
            text-align: center;
            width: 100%;
            display: block;
            margin-top: 5px;
          }
        }
      }
    }
  }
  .desc {
    margin-top: 15px;
    color: #2c2c48;
    padding: 0 15px;
    .descText {
      margin-top: 10px;
    }
  }
  .dynamic {
    gap: 0 10px; //上下间距 左右间距
    .item {
      width: 100%;
      height: 0;
      padding-top: 100%;
      position: relative;
      margin-top: 10px;
      .con {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 6px;
        overflow: hidden;
        image {
          height: 100%;
          display: block;
        }
      }
      .Copywriting {
        background-color: #f7f7f7;
        .TBold {
          padding: 10px;
        }
        .write {
          padding: 0 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          width: calc(100% - 20px);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          word-break: break-all;
        }
      }
    }
  }
}
</style>



